<template>
    <div :style="bgimg" id="sjlist">
      <el-container class="el-container" style="height: 100%;width: 100%">
        <el-header style="height: 15%;padding: 0px;width: 100%">
          <div style="float: left;font-size: 30px;">

            <span> 北斗星后台管理系统&emsp;</span>
            <i class="el-icon-user-solid" style="margin-right: 20px"></i>当前用户{{this.userInfo}}
            <el-button type="success" circle size="small" @click="openEdit">展开|关闭</el-button>
          </div>

        </el-header>
        <el-container style="height: 85%;width: 100%">
          <el-container>
            <el-aside style="width: auto;height: 100%">

              <el-col :span="12" style="width: 100%; height: 100%">
                <el-menu
                  ref="elmenu"
                  default-active="2"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  background-color="#545c64"
                  text-color="#fff"
                  :collapse="isCollapse"
                  active-text-color="#ffd04b" style="height: 100%">
                  <el-submenu v-for="(m1,mindex) in listMenu" :title="m1.menuName" :key="mindex"
                              :index="getIndex(m1.menuId)">
                    <template slot="title">
                      <i :class="m1.imagePath"></i>
                      <span>{{m1.menuName}}</span>
                    </template>

                    <el-submenu v-for="(m2,m2Index) in m1.listMenu" :key="m2Index" :index="getIndex(m2.menuId)">
                      <template slot="title">{{m2.menuName}}</template>
                      <el-menu-item v-for="(m3,m3Index) in m2.listMenu" :key="m3Index" :index="getIndex(m3.menuId)">
                        <span @click="openMenuEditHandler(m3.url)">{{m3.menuName}}</span>
                      </el-menu-item>
                    </el-submenu>
                  </el-submenu>

                </el-menu>
              </el-col>

            </el-aside>
            <el-main style="padding: 0px;width: 85%">

                <router-view ></router-view>

            </el-main>
        </el-container>

        </el-container>
      </el-container>
    </div>

</template>

<script>

  export default {

    name: "home",
    data() {
      return {
        bgimg:{
          backgroundImage:"url(" + require('../../assets/a.jpg') + ")",

          backgroundRepeat: "no-repeat",
          height:"100%",
          width:"100%",
          overflow:"hidden",
          backgroundSize:"cover"
        },
        userInfo: "",
        isCollapse: true,
        listMenu: "",
      }
    },
    created() {
      this.userInfo = window.localStorage.getItem("userInfo")
      this.initData();

    },
    methods: {
      ceshi() {
        this.$router.push("/test1")
      },
      openMenuEditHandler(url) {
        console.log("菜单列表路径"+url);
        this.$router.push(url)
      },

      initData() {

        this.$axios.post(this.$gloableData.serverPath + "user/menu/getMenu?loginName=" + this.userInfo).then(res => {
          this.$data.listMenu = res.data;
         // console.log("返回的数据" + JSON.stringify(this.$data.mylistMenu))
        })
      },
      getIndex(code) {
        return "" + code.toString();
      },
      openEdit() {
        if (this.isCollapse == true) {
          this.isCollapse = false
          //打开
        } else {
          this.isCollapse = true
          //关闭
        }
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      /* getUserInfo(){

       }*/
    },
    activated() {

      /* this.$axios.post(this.$gloableData.serverPath+"auth/test").then((response)=>{
           alert(response.data);
       })*/

      /*if(window.localStorage.getItem("userInfo")==null){
        this.$data.userInfo=JSON.parse(window.localStorage.getItem("userInfo")==null?"":window.localStorage.getItem("userInfo"))
      }else if(window.localStorage.getItem("userInfo")=="undefined"){
        this.$data.userInfo=parse(window.localStorage.getItem("userInfo")=="undefined"?"":window.localStorage.getItem("userInfo"))
      }*/

    },
    mounted() {
      // this.$axios.post(this.$gloableData.serverPath+"auth/test").then((response)=>{
      //   alert(JSON.stringify(response.data));
      // })

    }
  }
</script>

<style>
  .el-container {
    height: 650px;
  }

  .el-header {
    /*background-color: bisque;*/
    /*color: #E9EEF3;*/
    color: red;
    text-align: center;
    line-height: 60px;
  }

  .el-footer {
    /*background-color: #909399;*/
    color: #E9EEF3;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    /* background-color: #D3DCE6;*/
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    /*background-color: #E9EEF3;*/
    color: #333;
    text-align: center;
    /*line-height: 160px;*/
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;

  }

  .sjlist{background:#fff;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity: 0.8;}
</style>
<!--<style scoped>-->

<!--</style>-->
